<template>
  <t-skeleton :loading="loading">
  <t-collapse style="margin: 20px 0"  v-if="transformedData.length>0">
    <!-- 量房信息 -->
    <t-collapse-panel
      v-for="_ in dictionaryStore.get('decoration_design_order_measure_class')"
      :key="_.value"
      :header="_.label"
    >
      <template v-for="info in transformedData.filter((item) => item.fileType === 'measure' && item.fileSecondType === _.value)" 
                :key="info.id">
        <t-divider align="left">
            {{ userStore.getUserNameById(info.creator) }} {{ dayjs(info.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </t-divider>
        <!-- 图片预览 -->
        <div class="file-container">
          <template v-for="(file, index) in info.fileUrl" :key="index">
            <file-preview :file="file" />
          </template>
        </div>
      </template>
    </t-collapse-panel>
    
    <!-- 方案 -->
    <t-collapse-panel header="方案">
      <template v-for="info in transformedData.filter((item) => item.fileType === 'plane')" :key="info.id">
        <t-divider align="left">
            {{ userStore.getUserNameById(info.creator) }} {{ dayjs(info.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </t-divider>
        <!-- 图片预览 -->
        <div class="file-container">
          <template v-for="(file, index) in info.fileUrl" :key="index">
            <file-preview :file="file" />
          </template>
        </div>
      </template>
    </t-collapse-panel>
    
    <!-- 一见 -->
    <t-collapse-panel header="一见">
      <template v-for="info in transformedData.filter((item) => item.fileType === 'oneSee')" :key="info.id">
        <t-divider align="left">
            {{ userStore.getUserNameById(info.creator) }} {{ dayjs(info.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </t-divider>
        <!-- 图片预览 -->
        <div class="file-container">
          <template v-for="(file, index) in info.fileUrl" :key="index">
            <file-preview :file="file" />
          </template>
        </div>
      </template>
    </t-collapse-panel>
    
    <!-- 二见 -->
    <t-collapse-panel header="二见">
      <template v-for="info in transformedData.filter((item) => item.fileType === 'twoSee')" :key="info.id">
        <t-divider align="left">
            {{ userStore.getUserNameById(info.creator) }} {{ dayjs(info.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </t-divider>
        <!-- 图片预览 -->
        <div class="file-container">
          <template v-for="(file, index) in info.fileUrl" :key="index">
            <file-preview :file="file" />
          </template>
        </div>
      </template>
    </t-collapse-panel>
  </t-collapse>
  <t-empty v-else  title="暂无数据" style="margin: 100px" />
  </t-skeleton>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import { inject, onMounted, Ref, ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { orderFileListCRUD, } from '@/api/project/details'
import Upload from '@/components/upload/index.vue';
import ImageViewer from '@/components/image-viewer/index.vue';
import FilePreview from '@/components/file-preview/index.vue';
import { useDictionaryStore, useUserStore } from '@/store';
// 定义 props
const props = defineProps({
  injectKey: {
    type: String,
    default: 'engineeringDetails',
  },
});
// 默认的注入键
const injectKey = props.injectKey
// 动态注入数据
const details = inject<Ref<Record<string, any>>>(injectKey);
// 施工详情
const engineeringDetails = details;
const engineeringId = details.value.engineeringId || details.value.id
const orderId = details.value.orderId || details.value.id
// 用户仓库
const userStore = useUserStore();
// 字典仓库
const dictionaryStore = useDictionaryStore();
// 加载状态
const loading = ref(false);
onMounted(() => {
  hanldeGetInspetList();
});
const transformedData = ref<Record<string,any>[]>([])
// 获取验收单
const hanldeGetInspetList = () => {
  loading.value = true;
  orderFileListCRUD.page({pageSize:-1,orderId:orderId}).then(data => {
    transformedData.value = data
  }).catch(({ message }) => {
    MessagePlugin.error(message);
  }).finally(() => {
      loading.value = false;
    });
}

</script>
<style scoped>
.file-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0;
}
</style>
